<script setup lang="ts">
import { WeatherMoon24Regular, WeatherSunny24Regular } from '@vicons/fluent';

import SwitchItem from '@/setting/components/widget/switch-item.vue';
import { useAppearanceSettingStore } from '@/store/modules/appearance-setting';
import { BUILT_IN_THEME_PRESETS } from '@/constant';

defineOptions({
  name: 'SettingAppearance',
});

// 昼夜主题
const THEME_PRESET: Array<{ icon: Component; value: string; name: string }> = [
  {
    icon: WeatherSunny24Regular,
    value: 'light',
    name: '明亮',
  },
  {
    icon: WeatherMoon24Regular,
    value: 'dark',
    name: '暗黑',
  },
];
const themeValue = computed(() => {
  return useAppearanceSettingStore().getDarkTheme ? 'dark' : 'light';
});
function activeTheme(theme: string): string[] {
  return theme === themeValue.value ? ['outline-box-active'] : [];
}
function toggleDarkTheme(theme: string): void {
  useAppearanceSettingStore().setDarkTheme(theme === 'dark');
}

// 内置主题
const appThemeValue = computed(() => {
  return useAppearanceSettingStore().getAppTheme;
});
function activeColor(value: string) {
  return value === appThemeValue.value ? ['outline-box-active'] : [];
}
function toggleAppTheme(color: string) {
  useAppearanceSettingStore().setAppTheme(color);
}

// 圆角
const RADIUS_ITEMS = [
  { label: '0', value: '0px' },
  { label: '0.25', value: '3px' },
  { label: '0.5', value: '6px' },
  { label: '0.75', value: '9px' },
  { label: '1', value: '12px' },
];
const radiusValue = computed(() => {
  return useAppearanceSettingStore().getBorderRadius;
});
function activeRadius(value: string) {
  return value === radiusValue.value ? 'primary' : 'default';
}
function toggleRadius(value: string) {
  useAppearanceSettingStore().setBorderRadius(value);
}

// 深色侧边栏
const darkSide = computed(() => {
  return useAppearanceSettingStore().getDarkSide;
});
function toggleDarkSide() {
  useAppearanceSettingStore().setDarkSide(!darkSide.value);
}
// 深色顶栏
const darkTop = computed(() => {
  return useAppearanceSettingStore().getDarkTop;
});
function toggleDarkTop() {
  useAppearanceSettingStore().setDarkTop(!darkTop.value);
}
</script>

<template>
  <div>
    <h4>主题</h4>
    <div class="flex flex-wrap w-full flex-wrap justify-around">
      <template v-for="theme of THEME_PRESET" :key="theme.value">
        <div
          class="flex cursor-pointer flex-col"
          @click="toggleDarkTheme(theme.value)"
        >
          <div
            :class="activeTheme(theme.value)"
            class="outline-box flex items-center justify-center py-4"
          >
            <NIcon :component="theme.icon" size="24" class="mx-16 size-5" />
          </div>
          <div class="text-muted-foreground mt-2 text-center text-xs">
            {{ theme.name }}
          </div>
        </div>
      </template>
    </div>
    <SwitchItem
      :checked="darkSide"
      name="深色侧边栏"
      :disabled="themeValue === 'dark'"
      @update:checked="toggleDarkSide"
    />
    <SwitchItem
      :checked="darkTop"
      name="深色顶栏"
      :disabled="themeValue === 'dark'"
      @update:checked="toggleDarkTop"
    />

    <h4>内置主题</h4>
    <div class="flex flex-wrap w-full flex-wrap justify-around">
      <template v-for="color of BUILT_IN_THEME_PRESETS" :key="color.type">
        <div
          class="flex cursor-pointer flex-col"
          @click="toggleAppTheme(color.color)"
        >
          <div
            :class="activeColor(color.color)"
            class="outline-box flex items-center justify-center py-4"
          >
            <div class="w-[20px] h-[20px] rounded-md mx-10" :style="{ backgroundColor: color.color }" />
          </div>
          <div class="text-muted-foreground my-2 text-center text-xs">
            {{ color.title }}
          </div>
        </div>
      </template>
    </div>

    <h4>圆角</h4>
    <NSpace justify="space-around">
      <NButton
        v-for="item of RADIUS_ITEMS"
        :key="item.value"
        :type="activeRadius(item.value)"
        @click="toggleRadius(item.value)"
      >
        {{ item.label }}
      </NButton>
    </NSpace>
    <h4>其他</h4>
    <SwitchItem v-model:checked="darkSide" name="灰色模式" />
  </div>
</template>

<style lang="less" scoped>
.outline-box.outline-box-active {
  outline-color: v-bind(appThemeValue);
  outline-width: 2px;
}
.outline-box:not(.outline-box-active):hover::after {
  outline-color: v-bind(appThemeValue);
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  border-radius: 0.375rem;
  opacity: 1;
}
</style>
